<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="email=no">
    <title>普惠安信贷</title>
    <link rel="stylesheet" href="../css/cssAXD/style.css"/>
    <script src="../js/jsAXD/h5-fontsize.js"></script>
</head>
<body>
    <div class="bindMain">
        <img src="../images/bank/imgAXD/bind-logo.png" alt="" class="logo"/>
        <form action="">
            <h3>客户信息绑定</h3>
            <ul>
                <li class="liInput">
                    <i></i><input type="text" placeholder="姓名" class="name" maxlength="10"/><b></b>
                </li>
                <li class="liInput">
                    <i></i><input type="text" placeholder="身份证号" class="card" maxlength="18"/><b></b>
                </li>
                <li class="liInput">
                    <i></i><input type="text" placeholder="手机号" maxlength="11" class="phone"/><b></b>
                </li>
                <li class="liInput liInput2">
                    <input type="text" placeholder="请输入验证码" class="word"/>
                    <input type="button" value="发送验证码" class="send"/>
                    <b></b>
                </li>
                <li class="liTips"></li>
                <li class="liBtn">
                    <input type="button" value="提交绑定"/>
                </li>
            </ul>
            <div class="tips">您还是未绑定客户，请您提交个人信息</div>
        </form>
    </div>
    <div class="alertWin">
        <div class="box">
            <h3>提交成功！</h3>
            <p>提交成功！我们会在5个工作日内审核，敬请等待。</p>
            <a href="#" class="btn">确 定</a>
        </div>
    </div>
    <script src="../js/jsAXD/jquery-1.11.1.min.js"></script>
    <script>
        var nameStatic=cardStatic=phoneStatic=wordStatic= 0,formStatic;
        //姓名验证：
        $(".name").focus(function(){
            $(this).next("b").hide();
        }).blur(function(){
            var nameVal = $(this).val();
            var regExp = /^[\u4e00-\u9fff]+$/;
                    if(!nameVal) {
                        $(this).next("b").show();
                        nameStatic=0;
                        tipsShow();
                        return false;
                        // 判断输入的姓名是否是中文
                    }else if(regExp.test(nameVal)) {
                        // 真实姓名的长度是否符合要求
                        if(nameVal.length < 2 || nameVal.length > 10) {
                            $(this).next("b").show();
                            nameStatic=0;
                            tipsShow();
                            return false;
                        }else {
                            $(this).next("b").hide();
                            nameStatic=1;
                            tipsHide();
                        }
                    }else{
                        $(this).next("b").show();
                        nameStatic=0;
                        tipsShow();
                    }
        });
        //身份证号验证：
        $(".card").focus(function(){
            $(this).next("b").hide();
        }).blur(function(){
                    var cardVal = $(this).val();
                     var cardReg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                    if(!cardVal) {
                        $(this).next("b").show();
                        cardStatic=0;
                        tipsShow();
                        return false;
                    }else if(cardReg.test(cardVal)) {
                        // 身份证验证
                        $(this).next("b").hide();
                        cardStatic=1;
                        tipsHide();
                    }else{
                        $(this).next("b").show();
                        cardStatic=0;
                        tipsShow();
                    }
                });
        //手机号验证：
        $(".phone").focus(function(){
            $(this).next("b").hide();
        }).blur(function(){
                    var phoneVal = $(this).val();
                    var phoneExp =  /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    if(!phoneVal) {
                        $(this).next("b").show();
                        phoneStatic=0;
                        tipsShow();
                        return false;
                    }else if(phoneExp.test(phoneVal)) {
                        // 手机号验证
                        $(this).next("b").hide();
                        phoneStatic=1;
                        tipsHide();
                    }else{
                        $(this).next("b").show();
                        phoneStatic=0;
                        tipsShow();
                    }
                });
        //短信验证码验证：
        $(".word").focus(function(){
            $(this).parents("li").children("b").hide();
        }).blur(function(){
                    var wordVal = $(this).val();
                    if(!wordVal) {
                        $(this).parents("li").children("b").show();
                        wordStatic=0;
                        tipsShow();
                        return false;
                    }else{
                        // 手机号验证
                        $(this).parents("li").children("b").hide();
                        wordStatic=1;
                        tipsHide();
                    }
                });

        function tipsShow(){
            $(".liTips").text("*请输入正确信息");
        }
        function tipsHide(){
            formStatic=nameStatic * cardStatic * phoneStatic * wordStatic;
            if(formStatic){
                $(".liTips").text("");
                $(".liBtn input").css({"background":"#1077cf"});
            }
        }

        $(".send").click(function(){
            $(".send").addClass("active").val('5s').attr("disabled","disabled");
            var time=5;
            var timer=setInterval(function(){
                time--;
                if(time>-1){
                    $(".send").addClass("active").val(time+"s");
                }else{
                    $(".send").removeClass("active").val("重新发送").removeAttr("disabled");
                    clearInterval(timer);
                }
            },1000);
        });

        $(".liBtn input").click(function(){
            formStatic=nameStatic * cardStatic * phoneStatic * wordStatic;
            if(formStatic){
                $(".alertWin").show();
                //提交表单
            }else{
                tipsShow();
            }
        });
    </script>
</body>
</html>